import React, { useEffect, useRef } from 'react';
import G6 from '@antv/g6';

const CustomImageNode = () => {
  const ref = useRef(null);

  useEffect(() => {
    // 创建 G6 图表实例
    const graph = new G6.Graph({
      container: ref.current,
      width: 500,
      height: 500,
      defaultNode: {
        // 节点样式修改
        type: 'image', // 设置节点为图片
        size: [40, 40], // 节点大小
      },
    });

    // 添加节点和边
    graph.data({
      nodes: [
        {
          id: 'node1',
          x: 100,
          y: 100,
          label: 'Node 1',
          img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ',
        },
        {
          id: 'node2',
          x: 350,
          y: 250,
          label: 'Node 2',
          img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ',
        },
      ],
      edges: [
        {
          id: 'edge1',
          source: 'node1',
          target: 'node2',
        },
      ],
    });

    // 渲染图表
    graph.render();
  }, []);

  return <div ref={ref} className="graph-container" />;
};

export default CustomImageNode;
